<script setup>
import {RouterView} from 'vue-router'
import {onBeforeMount} from "vue";
import logo from '/public/icons8-doge-50.png'

onBeforeMount(() => {

})


</script>

<template>
  <div class="common-layout">
    <el-container class="page">
      <el-header class="header">
        <el-image style="width: 50px; height: 50px" :src="logo"  />
      </el-header>

      <!--  aside -->
      <el-container class="content">
        <el-aside width="180px">
          <el-menu
              default-active="/machine/ipmi"
              mode="vertical"
              router="router"
          >
            <el-sub-menu index="1" >
              <template #title>
                <el-icon><Cpu /></el-icon>
                <span>机器管理</span>
              </template>
              <el-menu-item index="/machine/ipmi" >IPMI</el-menu-item>
              <el-menu-item index="/machine/ssh">SSH</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2" >
              <template #title>
                <el-icon>
                  <Coin/>
                </el-icon>
                <span>应用部署</span>
              </template>
              <el-menu-item index="/deploy/os">操作系统</el-menu-item>
              <el-menu-item index="/deploy/mysql-single">MySQL</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3" >
              <template #title>
                <el-icon>
                  <location/>
                </el-icon>
                <span>测试页面</span>
              </template>
              <el-menu-item index="/login" >登录</el-menu-item>
              <el-menu-item index="/register">注册</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- main -->
        <el-main class="main">
          <RouterView/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.header {
  background-color: rgba(210, 105, 30, 0.48);
  display: flex;
  align-items: center;
}

:deep(.el-menu){
  height: 100%;
}

.main {
  //background-color: #eee;
}

.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }
}
</style>
